<template>
  <view :data-theme="globPrimary">
    <exam-navbar-category @change="handleEaxmChange" :categoryId="categoryId" :title="title"></exam-navbar-category>
    <mescroll-body
      ref="mescrollRef"
      :height="mescrollHeight"
      :down="downOption"
      :up="upOption"
      @init="mescrollInit"
      @down="downCallback"
      @up="getExamList"
    >
      <view class="exam-item" v-for="item in examList" :key="item.id">
        <view class="u-line-1 u-flex">
          <view class="bag" v-if="item.has_bought == 1 || item.user_price == 0">
            <u-image
              width="72"
              height="32"
              v-if="item.has_bought == 1"
              src="@/static/images/yigouamai.png"
            ></u-image>
            <u-image
              width="72"
              height="32"
              v-if="item.user_price == 0"
              src="@/pageFound/static/images/free.png"
            >
            </u-image>
          </view>
          <view class="title u-line-1">{{ item.title }}</view>
        </view>
        <view class="time" v-if="item.start_time > 0"
          >开放时间：{{ item.start_time | date('yyyy-mm-dd hh:MM') }}～{{
            item.end_time | date('yyyy-mm-dd hh:MM')
          }}</view
        >
        <view class="time" v-else>开放时间：永久开放</view>

        <view class="u-flex u-row-between">
          <view class="count">共{{ item.total_count }}题</view>
          <view v-if="item.user_price > 0 && item.has_bought == 0">
            <edu-button
              type="primary"
              size="medium"
              shape="circle"
              @click="hancleExamBtn(item, 'buy')"
              >{{ item.user_price | formatCurrency(null, 0) }} | 购买</edu-button
            >
          </view>
          <view v-else>
            <edu-button
              type="primary"
              size="medium"
              shape="circle"
              v-if="item.exam_status === 1"
              @click="hancleExamBtn(item, 'answer')"
              >开始答题</edu-button
            >
            <edu-button type="primary" size="medium" shape="circle" :disabled="true" v-else
              >暂未开放</edu-button
            >
          </view>
        </view>
      </view>
    </mescroll-body>
    <!-- 人脸 -->
    <edu-face ref="refFaceVerify" :z-index="20090" @confirm="onFaceVerifyConfirm"></edu-face>

    <edu-user-coupon></edu-user-coupon>
  </view>
</template>

<script>
import { mapGetters } from 'vuex'
import examNavbarCategory from '../components/exam-navbar-category.vue'
import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js'
import { uploadFile } from '@/utils/uploadFile.js'
export default {
  mixins: [MescrollMixin],
  components: {
    examNavbarCategory,
  },
  data() {
    return {
      downOption: { auto: false },
      upOption: { auto: false },
      categoryId: 0, // 分类id
      title: '', // 出题数量
      moduleId: 0, // 板块id
      examList: [], // 考试列表
      paperId: 0, // 考试id
    }
  },
  computed: {
    ...mapGetters({
      globPrimary: 'designSetting/getGlobTheme',
      globPrimaryColor: 'designSetting/getGlobThemeColor',
      globNavbarHeight: 'projectSetting/globNavbarHeight',
      globStatusBarHeight: 'projectSetting/globStatusBarHeight',
    }),
    // 导航中间的标题的样式
    mescrollHeight() {
      let windowHeight = this.$u.sys().windowHeight
      return windowHeight - this.globNavbarHeight - this.globStatusBarHeight + 'px'
    },
  },
  // 监听页面返回
  onBackPress(options) {
    if (options.from === 'navigateBack') {
      return false
    }
    uni.$u.route({ type: 'tab', url: 'pages/exam/index' })
    return true
  },
  onLoad(option) {
    this.moduleId = option.id
    this.categoryId = option.category_id
    this.title = option.title
  },
  onShow() {
    if (this.categoryId && this.mescroll) {
      this.mescroll.resetUpScroll()
    }
  },
  methods: {
    getExamList(page) {
      this.$edu.api
        .getExamList({
          category: this.categoryId,
          module_id: this.moduleId,
          page: page.num,
          count: page.size,
        })
        .then((res) => {
          const { data } = res
          let list = data.data
          this.mescroll.endSuccess(list.length)
          if (page.num == 1) this.examList = []
          this.examList = this.examList.concat(list)
        })
    },
    handleEaxmChange(id) {
      this.categoryId = id
      this.mescroll.resetUpScroll()
    },
    // 处理按钮
    hancleExamBtn(item, type) {
      this.$edu.judgeLogin(() => {
        if (type == 'buy') {
          this.$u.route('pageFound/exam/pay', {
            id: item.paper_id,
            key: 'paper',
            exam_id: item.id,
            moduleId: this.moduleId,
          })
        } else {
          if (item.exam_rest_num == 0) {
            this.$u.toast('考试次数已用完')
          } else {
            if (item.face_verification == 1) {
              this.$refs.refFaceVerify.onFaceMessage()
              this.paperId = item.paper_id
            } else {
              this.$u.route('pageFound/exam/paper/topic', {
                id: item.paper_id,
              })
            }
          }
        }
      })
    },
    // 提交人脸验证
    onFaceVerifyConfirm(file) {
      uploadFile('/user/tencent/face/person/verify', file, {
        scene_key: 'exam',
        scene_id: this.paperId,
        scene_type: 1,
      })
        .then((res) => {
          this.$u.toast(res.msg)
          this.$refs.refFaceVerify.onClose()
          this.$u.route('pageFound/exam/paper/topic', {
            id: this.paperId,
          })
        })
        .catch((err) => {
          this.$u.toast(err.msg)
          this.$refs.refFaceVerify.resetPhoto()
        })
    },
  },
}
</script>

<style lang="scss" scoped>
.exam-item {
  background: #ffffff;
  border-radius: 8rpx;
  margin: 20rpx 30rpx 0;
  padding: 24rpx 30rpx;
  .bag {
    margin-right: 10rpx;
  }
  .title {
    font-size: 30rpx;
    font-weight: 500;
    color: #303133;
  }
  .time {
    margin-top: 8rpx;
    margin-bottom: 20rpx;
    font-size: 22rpx;
    color: #909399;
  }
  .count {
    font-size: 24rpx;
    color: #909399;
  }
  ::v-deep .edu-btn {
    height: 56rpx;
    min-width: 188rpx;
    line-height: 56rpx;
    padding: 0 20rpx;
  }
}
</style>
